<template>
<el-container>
  <el-header>
    <el-row>
      <el-col>
        <el-button size="small" type="primary" @click="toBack">返回</el-button>
      </el-col>
    </el-row>
  </el-header>
  <el-main style="height: auto;">
    <el-card style="width: 600px; height: auto; margin: 0 auto;">
      <el-form :model="interfaces" :rules="interfacesRules" ref="interfaces">
        <el-row>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道选择" label-width="110px" prop="channelCompanyId">
              <el-input size="small" v-model="operatorName" style="width: 100%;" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'TELECOM'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号" label-width="110px" prop="userName1">
              <el-input size="small" v-model="interfaces.userName1" style="width: 100%;" placeholder="REST接口账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号密码" label-width="110px" prop="passwd1">
              <el-input size="small" v-model="interfaces.passwd1" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="平台账号 " label-width="110px" prop="soapUser1">
              <el-input size="small" v-model="interfaces.soapUser1" style="width: 100%;" placeholder="Webservice账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="平台账号密码" label-width="110px" prop="soapPasswd1">
              <el-input size="small" v-model="interfaces.soapPasswd1" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'SHUOLANG'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号" label-width="110px" prop="userName1">
              <el-input size="small" v-model="interfaces.userName1" style="width: 100%;" placeholder="REST接口账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号密码" label-width="110px" prop="passwd1">
              <el-input size="small" v-model="interfaces.passwd1" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="平台账号 " label-width="110px" prop="soapUser1">
              <el-input size="small" v-model="interfaces.soapUser1" style="width: 100%;" placeholder="Webservice账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="平台账号密码 " label-width="110px" prop="soapPasswd1">
              <el-input size="small" v-model="interfaces.soapPasswd1" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="接口base路径 " label-width="110px" prop="accountBaseUrl">
              <el-input size="small" v-model="interfaces.accountBaseUrl" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'UNICOM'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号" label-width="110px" prop="userName2">
              <el-input size="small" v-model="interfaces.userName2" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号ID" label-width="110px" prop="unicomAccountId2">
              <el-input size="small" v-model="interfaces.unicomAccountId2" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="APIKEY" label-width="110px" prop="key2">
              <el-input size="small" v-model="interfaces.key2" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'JIUTIAN'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号" label-width="110px" prop="userName3">
              <el-input size="small" v-model="interfaces.userName3" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="APIKEY" label-width="110px" prop="key3">
              <el-input size="small" v-model="interfaces.key3" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="账号ID" label-width="110px" prop="key3">
              <el-input size="small" v-model="interfaces.unicomAccountId3" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'JIUTIAN_IOT'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API账号" label-width="110px" prop="userName4">
              <el-input size="small" v-model="interfaces.userName4" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="APIKEY" label-width="110px" prop="key4">
              <el-input size="small" v-model="interfaces.key4" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'KAHAO'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="API手机号" label-width="110px" prop="kahaoPhone5">
              <el-input size="small" v-model="interfaces.kahaoPhone5" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="TOKEN" label-width="110px" prop="key5">
              <el-input size="small" v-model="interfaces.key5" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'XIAOXIANG'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="账号" label-width="110px" prop="userName5">
              <el-input size="small" v-model="interfaces.userName5" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="密码" label-width="110px" prop="passwd2">
              <el-input size="small" v-model="interfaces.passwd2" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'ZHONGTIAN'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="账号" label-width="110px" prop="userName5">
              <el-input size="small" v-model="interfaces.userName5" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="密码" label-width="110px" prop="passwd2">
              <el-input size="small" v-model="interfaces.passwd2" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="transition" v-if="interfaces.dictOperator == 'CHINAMOBILE'">
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="通道名称" label-width="110px" prop="accountName">
              <el-input size="small" v-model="interfaces.accountName" style="width: 100%;" placeholder="通道名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="账号" label-width="110px" prop="userName6">
              <el-input size="small" v-model="interfaces.userName6" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="密码" label-width="110px" prop="passwd3">
              <el-input size="small" v-model="interfaces.passwd3" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="apnId" label-width="110px" prop="apnId">
              <el-input size="small" v-model="interfaces.apnId" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="submit" :xl="{ span: 18, push: 3 }" :lg="{ span: 18, push: 3 }">
            <el-form-item>
              <el-button size="small" type="primary" @click="submitHandle('interfaces')">确定</el-button>
              <el-button size="small" @click="toBack">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </el-main>
</el-container>
</template>

<script>
import { interfaceAccountConfigurationEdit, interfaceAccountConfigurationSave } from '@/api/getData'

export default {
  name: 'EditAccount',
  data() {
    return {
      interfacesRules: {
        channelCompanyId: [{ required: true, message: '请选择通道', trigger: 'change' }],
        userName1: [{ required: true, message: '请输入API账号', trigger: 'blur' }],
        passwd1: [{ required: true, message: '请输入API账号密码', trigger: 'blur' }],
        soapUser1: [{ required: true, message: '请输入平台账号', trigger: 'blur' }],
        soapPasswd1: [{ required: true, message: '请输入平台账号密码', trigger: 'blur' }],
        userName2: [{ required: true, message: '请输入API账号', trigger: 'blur' }],
        unicomAccountId2: [{ required: true, message: '请输入API账号ID', trigger: 'blur' }],
        key2: [{ required: true, message: '请输入APIKEY', trigger: 'blur' }],
        userName3: [{ required: true, message: '请输入API账号', trigger: 'blur' }],
        key3: [{ required: true, message: '请输入APIKEY', trigger: 'blur' }],
        userName4: [{ required: true, message: '请输入API账号', trigger: 'blur' }],
        key4: [{ required: true, message: '请输入APIKEY', trigger: 'blur' }],
        kahaoPhone5: [{ required: true, message: '请输入API手机号', trigger: 'blur' }],
        key5: [{ required: true, message: '请输入TOKEN', trigger: 'blur' }],
        unicomAccountId3: [{ required: true, message: '请输入账号ID', trigger: 'blur' }],
        userName5:[{ required: true, message: '请输入账号', trigger: 'blur' }],
        passwd2:[{ required: true, message: '请输入密码', trigger: 'blur' }],

        userName6:[{ required: true, message: '请输入账号', trigger: 'blur' }],
        passwd3:[{ required: true, message: '请输入密码', trigger: 'blur' }],
        apnId:[{ required: true, message: '请输入apnId', trigger: 'blur' }],
      },
      interfaces: {
        accountBaseUrl:'',
        accountName:'',
        channelCompanyId: '',
        dictOperatorNameSelect: [],
        userName1: '',
        passwd1: '',
        soapUser1: '',
        soapPasswd1: '',
        userName2: '',
        unicomAccountId2: '',
        key2: '',
        userName3: '',
        key3: '',
        userName4: '',
        key4: '',
        kahaoPhone5: '',
        key5: '',
        dictOperatorName: '',
        dictOperator: '',
        unicomAccountId3: '',
        operatorName:'',

        apnId:'',
        userName6:'',
        passwd3:''
      },
      value: false,
      operatorName:''
    }
  },
  created() {
    this.id = this.$route.params.id
    this.initData()
  },
  methods: {
    toBack() {
      this.$router.back(-1)
    },
    async initData() {
      const returnData = await interfaceAccountConfigurationEdit({
        id: this.id
      })
      this.interfaces.dictOperatorNameSelect = []
      if (returnData._result) {
        this.interfaces.dictOperator = returnData.data.account.dictOperator
        this.interfaces.channelCompanyId = returnData.data.account.channelCompanyId
        this.operatorName=returnData.data.channelCompany.dictOperatorName
        this.interfaces.userName1 = returnData.data.account.userName
        this.interfaces.passwd1 = returnData.data.account.passwd
        this.interfaces.soapUser1 = returnData.data.account.soapUser
        this.interfaces.soapPasswd1 = returnData.data.account.soapPasswd
        this.interfaces.userName2 = returnData.data.account.userName
        this.interfaces.unicomAccountId2 = returnData.data.account.unicomAccountId
        this.interfaces.key2 = returnData.data.account.key
        this.interfaces.userName3 = returnData.data.account.userName
        this.interfaces.key3 = returnData.data.account.key
        this.interfaces.unicomAccountId3 = returnData.data.account.unicomAccountId
        this.interfaces.userName4 = returnData.data.account.userName
        this.interfaces.key4 = returnData.data.account.key
        this.interfaces.kahaoPhone5 = returnData.data.account.kahaoPhone
        this.interfaces.key5 = returnData.data.account.key
        this.interfaces.userName5 = returnData.data.account.userName
        this.interfaces.userName6 = returnData.data.account.userName
        this.interfaces.apnId = returnData.data.account.apnId
        this.interfaces.accountName = returnData.data.account.accountName
        this.interfaces.accountBaseUrl = returnData.data.account.accountBaseUrl
      }
    },
    submitHandle(interfaces) {
      this.$refs[interfaces].validate(async valid => {
        if (valid) {
          const returnData = await interfaceAccountConfigurationSave({
            id:this.id,
            channelCompanyId: this.interfaces.channelCompanyId,
            accountName: this.interfaces.accountName,
            userName: this.interfaces.userName1
              || this.interfaces.userName2
              || this.interfaces.userName3
              || this.interfaces.userName4
              || this.interfaces.userName5
              || this.interfaces.userName6
            ,
            passwd: this.interfaces.passwd1 || this.interfaces.passwd2 || this.interfaces.passwd3,
            apnId:this.interfaces.apnId.trim(),
            soapUser: this.interfaces.soapUser1,
            soapPasswd: this.interfaces.soapPasswd1.trim(),
            unicomAccountId: this.interfaces.unicomAccountId2 || this.interfaces.unicomAccountId3,
            key: this.interfaces.key2 || this.interfaces.key3 || this.interfaces.key4 || this.interfaces.key5,
            kahaoPhone: this.interfaces.kahaoPhone5,
            dictOperatorName: this.interfaces.dictOperatorName,
            dictOperator: this.interfaces.dictOperator,
            accountBaseUrl: this.interfaces.accountBaseUrl.trim()
          })
          if (returnData._result) {
            this.$message({ message: '编辑账号成功', type: 'success' })
            this.$router.push({ path: '/interface/account-configuration' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .el-container {
    .el-header {
      margin-top: 5vh;
    }
    .el-main {
      .el-col /deep/ .el-form-item {
        margin-bottom: 0px;
      }
      .submit /deep/ .el-form-item__content {
        display: flex;
        justify-content: space-between;
      }

      .el-select.el-select--small /deep/ input {
        text-align: center;
      }
    }
  }
  .el-select-dropdown__item {
    text-align: center;
  }
  .a {
    margin-bottom: 0 !important;
  }
  .el-form /deep/ .el-row {
    margin-bottom: 22px;
  }
</style>
